'use client';
import { Button, Spinner } from '@/app/components';
import { AlertDialog, Flex } from '@radix-ui/themes';
import axios from 'axios';
import { useRouter } from 'next/navigation';
import { useState } from 'react';

const DeleteIssueButton = ({ issueId }: { issueId: number }) => {
	const [error, setError] = useState(false);
	const [isDeleting, setDeleting] = useState(false);

	const router = useRouter();
	const deleteIssue = async () => {
		try {
			setDeleting(true);
			await axios.delete('/api/issues/' + issueId);
			router.push('/issues');
			router.refresh();
		} catch (error) {
			setDeleting(false);
			setError(true);
			console.log(error);
		}
	};

	return (
		<>
			<AlertDialog.Root>
				<AlertDialog.Trigger>
					<Button color='red' className='w-full' asChild disabled={isDeleting}>
						Delete Issue
						{isDeleting && <Spinner />}
					</Button>
				</AlertDialog.Trigger>
				<AlertDialog.Content>
					<AlertDialog.Title>Confirm Deletion</AlertDialog.Title>
					<AlertDialog.Description>
						Are you sure you want to delete this issue? This action cannot be
						undone.
					</AlertDialog.Description>
					<Flex mt='4' gap='3'>
						<AlertDialog.Cancel>
							<Button color='gray' variant='soft'>
								Cancel
							</Button>
						</AlertDialog.Cancel>
						<AlertDialog.Action>
							<Button color='red' onClick={deleteIssue} disabled={isDeleting}>
								Delete
							</Button>
						</AlertDialog.Action>
					</Flex>
				</AlertDialog.Content>
			</AlertDialog.Root>
			<AlertDialog.Root open={error}>
				<AlertDialog.Content>
					<AlertDialog.Title color='red'>Error</AlertDialog.Title>
					<AlertDialog.Description>
						This issue could not be deleted.
					</AlertDialog.Description>
					<Button
						color='gray'
						variant='soft'
						mt='2'
						onClick={() => setError(false)}
					>
						OK
					</Button>
				</AlertDialog.Content>
			</AlertDialog.Root>
		</>
	);
};

export default DeleteIssueButton;
